<!-- 产品结构-添加子件 -->
<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.partManager.productStructurePage.addChildPage.addChild')"
      @register="register"
      @ok="handleSubmit"
      :destroyOnClose="true"
      :minHeight="150"
      :width="400"
    >
      <BasicForm @register="registerForm">
        <template #code="{ model, field }">
          <Input
            v-model:value="model[field]"
            :placeholder="
              t('routes.demo.partManager.productStructurePage.addChildPage.codePlaceholder')
            "
          >
            <template #suffix>
              <Icon icon="ion:android-more-horizontal" color="#856d72" />
            </template>
          </Input>
        </template>
      </BasicForm>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { Input } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getAddChildForm } from './data';

  const { t } = useI18n();

  const handleSubmit = () => {
    // 提交表单
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });

  // 初始化表格
  const [registerForm, { validate }] = useForm({
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
    schemas: getAddChildForm(),
    showActionButtonGroup: false,
  });
</script>

<style lang="less"></style>
